<script setup>
    import TitleItem from '../../components/Mine/TitlieItem.vue'
    import { useRouter } from "vue-router";
    const router=useRouter()
    const usernick=localStorage.getItem('user_nick')
    const token=localStorage.getItem('token')
</script>
<template>
  <div>
    <div class="_login_banner">
      <div class="_login_banner_mine">
        <div class="_login_banner_seting"><van-icon name="setting-o" size="20" @click="router.push('/setting')" /></div>
        <div class="_login_user_info">
          <img src="https://lexuemiao.oss-cn-beijing.aliyuncs.com/uploads/images/avatar.jpg" alt="" />
          <div>{{usernick}}</div>
          <div v-show="!token" @click="router.push('/login')">请点击此处登录/注册</div>
        </div>
      </div>
      <div class="_login_mine_order_detail">
            <div class="_login_mine_item" @click="router.push('/order')">
                <van-icon name="logistics" size="25" />
                <div class="_login_mine_item_modile">我的订单</div>
                <div class="grey">买课发快递</div>
            </div>
            <div class="_login_mine_item" @click="router.push('/learncard')">
                <van-icon name="debit-pay"  size="25"/>
                <div class="_login_mine_item_modile">兑换课程</div>
                <div class="grey">兑换码兑换课程</div>
            </div>
            <div class="_login_mine_item" @click="router.push('/address')">
                <van-icon name="location-o" size="25" />
                <div class="_login_mine_item_modile">地址管理</div>
                <div class="grey">收货地址</div>
            </div>
      </div>
      <div>
        <title-item :text="'我的收藏'" @click="router.push('/collect')">
            <template v-slot:icon>
                <div>
                    <van-icon name="star-o" />
                </div>
            </template>
            
        </title-item>
        <title-item :text="'我的会员'"  @click="router.push('/vip')">
            <template v-slot:icon>
                <div>
                    <van-icon name="diamond-o" />
                </div>
            </template>
            
        </title-item>
        <title-item :text="'我的优惠券'" @click="router.push('/discountcoupon')">
            <template v-slot:icon>
                <div>
                    <van-icon name="cash-on-deliver" />
                </div>
            </template>
            
        </title-item>

      </div>
      <div class="footer">
        <title-item :text="'我的消息'" @click="router.push('/information')">
            <template v-slot:icon>
                <div>
                    <van-icon name="more-o" />
                </div>
            </template>
            
        </title-item>
        <title-item :text="'问题反馈'" @click="router.push('/problemfeedback')">
            <template v-slot:icon>
                <div>
                    <van-icon name="edit" />
                </div>
            </template>
            
        </title-item>
      </div>
    </div>
  </div>
</template>
<style scoped>
._login_banner {
  width: 100%;
  height: 100%;
}
._login_banner_mine {
  width: 100%;
  height: 500px;
  border-radius: 0px 0px 15px 15px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(https://wap.lexuemiao.com/img/user_bg.dd455109.png);
  color: white;
}
._login_user_info{
    width: 40%;
    height: 200px;
    margin: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10%;
}
._login_user_info img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
}
._login_banner_seting{
    width: 100%;
    height: 80px;
    text-align: right;
    padding: 20px;
    box-sizing: border-box;
    line-height: 80px;
}
._login_mine_order_detail{
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  
}
._login_mine_order_detail ._login_mine_item{
    width: 33.33%;
    height: 100%;
    border-right: 1px solid #ccc;
    /* display: flex; */
    font-size: 26px;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
}
._login_mine_item_modile{
    margin-top: 15px;
    margin-bottom: 15px;
}
.grey{
    color: #ccc;
}
.footer{
    margin-top: 20px;
}
</style>
